<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 数据渲染-->
    <li class="{completed: item.isDone}" v-for="(item , index ) in list"  :key="index">
      <div class="view">
        <!-- v-model和父组件双向数据绑定，违反单向数据流的原则。把v-model改成了:checked,给checkbox注册change事件 -->
        <input class="toggle" type="checkbox"  :checked="item.isDone" @change='change(item.id)' />
        <label>{{item.name}}</label>
         <!-- // 给删除按钮添加点击事件 -->
        <button class="destroy" @click="del(item.id)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  // 获取list
  props: {
    list: {
      type: Array,
      required: true
    }
  },
//  通过$emit把值传给父组件
  methods: {
    del(id){
this.$emit("del",id)
    },
    change(id){
      this.$emit("change",id)
    }
  }
}
</script>